<template>
  <div class="">
    <div class="cards">
      <el-card style="width: 300px" v-for="item in ACTIVITY_TYPE" :key="item.type">
        <div class="card-item">
          <div class="title">{{ item.title }}</div>
          <div class="dec">{{ item.dec }}</div>
          <div class="button">
            <el-button type="primary" plain @click="handleAdd(item)">立即新建</el-button>
          </div>
        </div>
      </el-card>
      <el-card style="width: 300px">
        <div class="card-item">
          <div class="title">邀请有礼</div>
          <div class="dec">用户邀请好友注册账号，可领取相应的优惠券</div>
          <div class="button">
            <el-button type="primary" plain @click="handleAdd('邀请有礼')">立即新建</el-button>
          </div>
        </div>
      </el-card>
      <el-card style="width: 300px">
        <div class="card-item">
          <div class="title">优惠券礼包</div>
          <div class="dec">用户一次获得多张优惠券。</div>
          <div class="button">
            <el-button type="primary" plain @click="handleAdd('优惠券礼包')">立即新建</el-button>
          </div>
        </div>
      </el-card>
    </div>
    <addDialog ref="addRef" :flag="true" :title="title" />
    <intivationDialog :flag="true" ref="intivationRef" :title="title" />
    <giftPackDialog :flag="true" ref="giftPackRef" :title="title" />
  </div>
</template>

<script setup>
import { listDataApi } from '@/api/system/dict/data'
import addDialog from '../activity/cpts/addDialog.vue'
import intivationDialog from '../invitation/cpts/addDialog.vue'
import giftPackDialog from '../giftPack/cpts/addDialog.vue'
import { useRoute } from 'vue-router'
const addRef = ref(null)
const intivationRef = ref(null)
const giftPackRef = ref(null)
const title = ref('')
const route = useRoute()

const ACTIVITY_TYPE = ref([])

function handleAdd(item) {
  console.log('route', route)
  const cityName = route.query.cityName
  console.log(item)
  if (item === '邀请有礼') {
    title.value = '邀请有礼设置'
    intivationRef.value.init(cityName)
  } else if (item === '优惠券礼包') {
    title.value = '优惠券礼包设置'
    giftPackRef.value.init(cityName)
  } else {
    title.value = item.title + '设置'
    addRef.value.init(item.type, cityName)
  }
}

/** 获取优惠券类型 */
const getListData = () => {
  listDataApi({ dictType: 'market_activity_type' }).then((res) => {
    ACTIVITY_TYPE.value = res?.rows.map((i) => {
      return {
        title: i.dictLabel,
        dec: i.remark,
        type: i.dictValue - 0
      }
    })
  })
}

onMounted(() => {
  getListData()
})
</script>

<style lang="scss">
.cards {
  display: flex;
  padding: 10px;
  width: 100%;
  flex-wrap: wrap;
  .el-card {
    flex-shrink: 0;
    margin: 10px;
    border-radius: 0;
    position: relative;
    .card-item {
      text-align: center;
      padding: 0 40px 40px 40px;
      .title {
        font-weight: bold;
        font-size: 20px;
      }
      .dec {
        text-align: left;
        margin-top: 10px;
      }
      .button {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 40px;
        color: #fff;
        .el-button {
          width: 100%;
          height: 40px;
          border-radius: 0;
          border: none;
        }
      }
    }
  }
}
</style>
